<template>
  <div class="chart-container">
    <h3>商品类型分布</h3>
    <v-chart class="chart" :option="chartOption" />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import type { XiangQing } from '../types';

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

interface Props {
  data: XiangQing[];
}

const props = defineProps<Props>();

const chartOption = computed(() => {
  // 统计商品类型分布
  const typeStats = props.data.reduce((acc, item) => {
    const type = item.goodsType || '未知类型';
    acc[type] = (acc[type] || 0) + 1;
    return acc;
  }, {} as Record<string, number>);

  const pieData = Object.entries(typeStats).map(([name, value]) => ({
    name,
    value
  }));

  return {
    title: {
      text: '商品类型分布',
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '商品类型',
        type: 'pie',
        radius: '50%',
        data: pieData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          color: '#fff'
        }
      }
    ]
  };
});
</script>

<style scoped>
.chart-container {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  height: 400px;
}

.chart-container h3 {
  margin: 0 0 20px 0;
  text-align: center;
  color: #fff;
}

.chart {
  height: 320px;
}
</style> 